<template>
    <div class="main">
        <div class="container">
            <ul class="good_box">
                <li v-for="i in listData" :key="i.id" @click="detFn(i.id)">
                    <img :src="i.pic" alt="">
                    <div>
                        <p>￥{{ i.minPrice }}</p>
                        <p>{{ i.name }}</p>
                        <p><el-button @click="addShoppFn(i)">加入购物车</el-button><span><i class="el-icon-shopping-cart-full" @click="$router.push('/shopping')"></i></span></p>
                    </div> 
                </li>

            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            listData: []
        };
    },
    computed: {

    },
    async created() {
        let res = await this.$axios('https://api.it120.cc/xiaochengxu/shop/goods/list')
        console.log(res);
        this.listData = res.data
    },
    mounted() {

    },
    watch: {

    },
    methods: {
        addShoppFn(data){
            let {id,name,pic,minPrice} = data
            let obj = {id,name,pic,minPrice}
            this.$store.commit('addShoppFn',obj)
        },
        detFn(id){
            this.$router.push(`/details/${id}`)
        }
    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

}

.container {
    width: 1176px;
    height: 100%;
    background: rgb(245, 230, 230);

}

.good_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    li {
        width: 23%;
        height: 380px;
        // border: 1px solid #999;
        border-radius: 3px;
        margin: 10px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        background: #fff;

        div {
            box-sizing: border-box;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 0 10px;

            .el-button {
                width: 180px;
            }
        }

        img {
            width: 270px;
            height: 270px;
        }

        p {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 5px 0;
            display: flex;
            align-items: center;
            
            i{
                margin: 0 20px;
                font-size: 20px;
                cursor: pointer;
            }
        }
    }
}
</style>
